<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../src/css/public.css">
<link rel="stylesheet" href="../src/css/details.css">

<body>
    <header>
        <div class="center header-top">
            <span>一年逛两次 <img src="../static/img/logo.png" alt=""> 每次都有新选择！</span>
            <ul>
                <li class="vip">尊敬的&nbsp;<a href="./mine.html" class="vip-name" title="个人主页"> </a>&nbsp;:&nbsp;您好
                </li>
                <li class="vip-login"><a href="./login.html" title="登录">登录</a></li>
                <li class="vip-register"><a href="./register.html" title="注册账号">注册</a></li>
                <li><a href="../index.html" title="主页">主页</a></li>
                <li class="call"><a href="./call.html" title="call me">联系我们</a></li>
            </ul>
        </div>
    </header>
    <div class="details">

    </div>
    <div class="header-box">
        <div class="car iconfont">
            我的购物车
            <span class="car-wu"></span>
            <span class="car-tu">&#xe614;</span>
        </div>
    </div>
    <div class="info">
        <ul>
            <li class="active">产品信息</li>
            <li>价格说明</li>
            <li>产品评价</li>
        </ul>
        <ol>
            <li class="active"><img src="../static/img/intor.jpg" alt=""></li>
            <li><img src="../static/img/intor01.jpg" alt=""></li>
            <li><img src="../static/img/intor02.jpg" alt=""></li>
        </ol>
    </div>
    <footer>
        <p>北京超衣设计文化有限公司 京网文[2019]10010-8848号 京ICP备12008848号</p>
        <p>Copyright © Shifone 2019 - 2080 All rights reserved.</p>

    </footer>

    <div id="dog">
        <img src="../static/dog.jpg" alt="" title="返回顶部">
    </div>
</body>
<script src="../dist/js/jquery.min.js"></script>
<script src="../src/js/free.js"></script>
<script src="../src/js/public.js"></script>
<script type="text/javascript">
    var parames = location.search;
    var reg = /id=([1-9]\d*)/;
    var res = parames.match(reg);
    var id = res[1];
    var str = '';
    $.ajax({
        url: "../api/detail.php",
        type: "post",
        dataType: "json",
        data: {
            id: id
        },
        success: function (res) {
            str += `
        <div class="clearfix">
            <div class="img">
                <div class="middle">
                    <img src="${res.images}" alt="">
                    <div class="shadow"></div>
                </div>
                <div class="big" style="background-image:url(${res.images})"></div>
            </div>
            <div class="introduce">

                <h4>${res.name}</h4>

                <div class="other-1">9月25日-10月4号，暴雪鹅绒服系列预售开启，定金25元膨胀5倍，可抵125元</div>

                <div class="price">价 格：￥<span class="jiage">${res.price}</span><span class="jiangjia">降价通知</span></div>

                <div class="all">库 存：<span>${res.all}</span>件</div>

                <div class="other-2">配 送 费 ：
                <p>支持 闪电退款 | 极速审核 <br>店铺单笔订单68元以上免运费；不满68元，需支付运费8元 <br>由 super clothes官方店 从 北京昌平 发货， 并提供售后服务</p>
                </div>

                <div class="other-3">选 择 尺 码 ：S M L XL XXL XXXL</div>

                <button>加入购物车</button>
                <div class="fanhui"><a href="./list.html">返回</a></div>
            </div>
        </div>
        `
            $(".details").html(str);
            $("ul>li").click(function () {
                $(this).addClass("active").siblings().removeClass("active").parent().next().find(
                    "li").eq($(this).index()).addClass("active").siblings().removeClass(
                    "active")
            })

            bindClick(res);
            Fangdajing();

        }
    });

    function bindClick(data) {
        $("button").click(function () {
            var u = getCookie("name");
            if (u == undefined) {
                var con = confirm("您还未登录，部分功能不能使用，现在去登录？");
                if (con) {
                    location.href = './login.html';
                    return false;
                }else{
                    return false;
                }
            } else {
                data.number = 1;
                var wdd = JSON.parse(localStorage.getItem("data"));
                if (!wdd) {
                    wdd = [];
                } else {
                    for (var i = 0; i < wdd.length; i++) {
                        if (wdd[i].id === data.id) {
                            wdd[i].number = wdd[i].number - 0 + 1;
                            odd = JSON.stringify(wdd);
                            localStorage.setItem("data", odd);
                            var con = confirm('添加购物车成功！去购物车看看添加的宝贝？');
                            console.log(con);
                            if (con) {
                                location.href = './car.html';
                            }
                            return false;
                        }
                    }
                }
                wdd.push(data);
                odd = JSON.stringify(wdd);

                localStorage.setItem("data", odd);

            }
            var con = confirm('添加购物车成功！去购物车看看添加的宝贝？');
            console.log(con);
            if (con) {
                location.href = './car.html';
            }
        });
    }

    function Fangdajing() {
        box = document.querySelector(".img");
        middle = this.box.querySelector(".middle");
        middleImg = this.box.querySelector(".middle img");
        shadow = this.box.querySelector(".middle .shadow");
        big = this.box.querySelector(".big");

        middle.addEventListener("mouseover", function () {
            Fangdajing.prototype.over();
        });
        middle.addEventListener("mouseout", function () {
            Fangdajing.prototype.out();
        });
        middle.addEventListener("mousemove", function () {
            Fangdajing.prototype.move();
        });
    }

    Fangdajing.prototype.out = function () {
        shadow.style.display = 'none';
        big.style.display = 'none';
    }
    Fangdajing.prototype.move = function (e) {
        var e = e || window.event;
        var x = e.clientX;
        var y = e.pageY;
        var boxLeft = box.offsetLeft;
        var boxTop = box.offsetTop;
        var shadowBanX = shadow.clientWidth / 2;
        var shadowBanY = shadow.clientHeight / 2;
        
        if (x < boxLeft + shadowBanX) {
            x = boxLeft + shadowBanX;
        }
        if (y < boxTop + shadowBanY) {
            y = boxTop + shadowBanY;
        }
        if (x > boxLeft + middle.offsetWidth - shadowBanX) {
            x = boxLeft + middle.offsetWidth - shadowBanX
        }
        if (y > boxTop + middle.offsetHeight - shadowBanY) {
            y = boxTop + middle.offsetHeight - shadowBanY
        }
        shadow.style.left = x - box.offsetLeft - shadowBanX + 'px'
        shadow.style.top = y - box.offsetTop - shadowBanY + 'px'

        var xPercent = shadow.offsetLeft / middle.clientWidth;
        var yPercent = shadow.offsetTop / middle.clientHeight;

        var bigImgWidth = parseInt(window.getComputedStyle(big)["background-size"].split(" ")[
            0]);
        var bigImgHeight = parseInt(window.getComputedStyle(big)["background-size"].split(" ")[
            1]);

        big.style.backgroundPosition = -xPercent * bigImgWidth + 'px ' + -yPercent *
            bigImgHeight + 'px';
    }
    Fangdajing.prototype.over = function () {
        shadow.style.display = 'block';
        big.style.display = 'block';
    }
</script>

</html>